<template>
	<view class="nav-bar-white">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar left-icon="left" background-color="#FFF" color="#000" @clickLeft="back" title="订单管理" :border="false" fixed="true"></uni-nav-bar>
	</view>
	
	<view class="page" :style="{marginTop:statusBarHeight+45+'px'}">
		<view class="flex-row justify-around" style="padding-top: 10rpx;background-color: #fff;padding-bottom: 10rpx;">
			<view class="search-bg">
				<uni-combox style="width: 24vw;" :isDisabled="true" :showClear="false" labelKey="name" valueKey="id" :candidates="candidates" placeholder="订单编号" v-model="searchTitle" :border="false" @input="select"></uni-combox>
				<input v-model="seachContent" class="seach-input" maxlength="11" placeholder="请输入搜索内容" />
			</view>
			<view class="flex-row screen-text" @click="openPop">
				<image src="/static/goods/goods_1.png" style="width: 30rpx;height: 30rpx;"></image>
				<text style="color: #999999;margin-left: 10rpx;">筛选</text>
			</view>
		</view>
		<view class="flex-row justify-around fixed-header" :style="{top:statusBarHeight+44+'px'}" style="position: sticky;border-bottom: 1px solid #E6E6E8;">
			<view v-for="(item, index) in topList" :key="index"
				:class="[item.default ? 'screen-item-avtive' : 'screen-item']" @click="changeTabs(item)">{{ item.name
				}}</view>
		</view>
		
		<view class="order-item" v-for="(item,index) in candidates" :key="index">
			<view class="flex-row justify-between items-center" style="font-size: 28rpx;">
				<view class="flex-col">
					<text>123123121231231</text>
					<text style="margin-top: 10rpx;">2025-11-25</text>
				</view>
				
				<text style="color: #19BE6B;">已完成</text>
			</view>
			<view class="line" style="margin-top: 20rpx;margin-bottom: 20rpx;"></view>
			<view class="flex-row">
				<view class="order-good-left">
					<image src="/static/logo.png"></image>
				</view>
				<view class="order-good-right">
					<text>商品介绍商品介绍商品名称</text>
					<view class="flex-row justify-between" style="color: #999999;">
						<text>规格：产品规格</text>
						<text>x2</text>
					</view>
					<text style="color: #FF0000;">￥200.00</text>
				</view>
				
			</view>
			<view class="line" style="margin-top: 20rpx;margin-bottom: 20rpx;"></view>
			<view class="flex-row justify-between">
				<view class="flex-row items-center justify-center">
					<image src="/static/manage_avator.png" style="width: 33rpx;height: 33rpx;"></image>
					<text style="margin-left: 8rpx;font-size: 30rpx;">18548856985</text>
				</view>
				<text>合计：400.00</text>
			</view>
			
			<view class="item-bottom-btn">
				<view class="btm2">删除订单</view>
				<view class="btm1">去发货</view>
			</view>
		</view>
	</view>
	
	
	
	
	
	
	
	
	
	<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
		<view class="flex-col pop-bg" style="padding: 25rpx;">
			<view class="flex-row justify-between">
				<text>订单筛选</text>
				<uni-icons type="closeempty" size="22" @click="closePop"></uni-icons>
			</view>
			<view class="line" style="margin-top: 30rpx;color: #fff;">.</view>
			
			<view style="margin-top: 30rpx;">
				<text>下单时间</text>
				<view class="flex-row justify-around items-center" style="margin-top: 20rpx;">
					<view class="start-date">
						<picker mode="date" :value="selectStartDate" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{selectStartDate ? selectStartDate : '选择开始时间'}}</view>
						</picker>
					</view>
					<text style="color: #999999;margin-left: 20rpx;margin-right: 20rpx;">-</text>
					<view class="start-date">
						<picker mode="date" :value="selectEndDate" :start="startDate" :end="endDate" @change="bindDateChangeEnd">
							<view class="uni-input">{{selectEndDate ? selectEndDate : '选择结束时间'}}</view>
						</picker>
					</view>
				</view>
			</view>
			
			<view style="margin-top: 30rpx;">
				<text>支付类型</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value1" mode="tag" :localdata="range1" @change="change1"></uni-data-checkbox>
			</view>
			<view style="margin-top: 30rpx;">
				<text>配送情况</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value2" mode="tag" :localdata="range2" @change="change2"></uni-data-checkbox>
			</view>
			
			<view style="margin-top: 30rpx;">
				<text>订单类型</text>
				<uni-data-checkbox class="custom-checkbox" v-model="value3" mode="tag" :localdata="range3" @change="change3"></uni-data-checkbox>
			</view>
			<view class="line" style="margin-top: 30rpx;color: #fff;">.</view>
			<view class="flex-row justify-around" style="margin-top: 50rpx;">
				<button class="btn-reset">重置</button>
				<button class="btn-sure">确定</button>
			</view>
		</view>
	</uni-popup>
	
	
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				topList: [{
					name: '全部',
					default: true,
					id: 0
				}, {
					name: '待付款',
					default: false,
					id: 1
				}, {
					name: '待发货',
					default: false,
					id: 2
				},{
					name: '已发货',
					default: false,
					id: 3
				},
				{
					name: '已完成',
					default: false,
					id: 4
				},],
				status:'0',
				searchTitle:'',
				seachContent:'',
				candidates:[
					{
						name:'订单编号',
						id:'1'
					},
					{
						name:'组合订单',
						id:'2'
					},
					{
						name:'手机号码',
						id:'3'
					},
					{
						name:'商品名称',
						id:'4'
					},
					{
						name:'用户ID',
						id:'5'
					},
					{
						name:'物流单号',
						id:'6'
					},
					{
						name:'商品ID',
						id:'7'
					},
				],
				selectStartDate:'',
				selectEndDate:'',
				value1:'',
				range1: [{"value": 0,"text": "全部"	},{"value": 1,"text": "云豆支付"},{"value": 2,"text": "微信支付"},
				{"value": 3,"text": "生日豆支付"},{"value": 4,"text": "帮扶豆支付"}],
				value2:'',
				range2: [{"value": 0,"text": "全部"	},{"value": 1,"text": "未发货"},{"value": 2,"text": "已发货"},
				{"value": 3,"text": "已收货"},{"value": 4,"text": "揽件中"},{"value": 5,"text": "退货"}],
				value3:'',
				range3: [{"value": 0,"text": "全部"	},{"value": 1,"text": "普通订单"},{"value": 2,"text": "卡券订单"},
				{"value": 3,"text": "虚拟订单"}],
			};
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			openPop(){
				this.$refs.popup.open()
			},
			closePop(){
				this.$refs.popup.close()
			},
			select(e) {
				console.log(e) // 选项一
			},
			change1(e){
				console.log(e)
			},
			change2(e){
				console.log(e)
			},
			change3(e){
				console.log(e)
			},
			changeTabs(item){
				let obj = this.topList.find(v => v.default)
				if (obj) {
					obj.default = false
					item.default = true
				}
				this.status = item.id
			},
			bindDateChange(e) {
				this.selectStartDate = e.detail.value
			},
			bindDateChangeEnd(e) {
				this.selectEndDate = e.detail.value
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 10;
				} else if (type === 'end') {
					year = year + 10;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			back(){
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
.page {
	width: 100%;
	// overflow-y: auto;
	// overflow-x: hidden;
	height: 100%;
	min-height: 90vh;
	background-color: #F5F6F7;
}
.search-bg{
	display: flex;
	flex-direction: row;
	background-color: #F3F3F3;
	border-radius: 45rpx;
	height: 80rpx;
	margin-left: 20rpx;
	align-items: center;
	padding-left: 30rpx;
	padding-right: 20rpx;
}
.screen-text{
	width: 30%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.fixed-header{
	background-color: white;
	z-index: 1;
}	
.screen-item-avtive {
	position: relative;
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: bold;
	color: #428AF6;
	letter-spacing: 2rpx;
	padding: 24rpx 0;
}
.screen-item {
	font-size: 28rpx;
	font-family: PingFang SC, PingFang SC;
	color: #333;
	letter-spacing: 2rpx;
	padding: 24rpx 0;
}
.screen-item-avtive::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 4rpx;
	background-color: #428AF6;
	width: 50%;
	transform: translateX(-50%);
	border-radius: 4rpx;
	
	// transition: all .5s linear;
	animation: change 1s linear;
}
@keyframes change {
	0% {
		width: 50%;
	}

	50% {
		width: 100%;
	}

	100% {
		width: 50%;
	}
}
.order-item{
	background-color: #fff;
	margin: 15rpx;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	padding: 25rpx;
}
.order-good-left{
	width: 30%;
}
.order-good-left image{
	width: 200rpx;
	height: 200rpx;
}
.order-good-right{
	width: 70%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.item-bottom-btn{
	display: flex;
	margin-top: 30rpx;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	gap: 20rpx;
}
.btm1 {
	padding: 6rpx 20rpx;
	background-color: #ffffff;
	color: #5c8edc;
	border: #5c8edc 1rpx solid;
	border-radius: 35rpx;
	font-size: 28rpx;
}
.btm2 {
	padding: 6rpx 20rpx;
	background-color: #fff;
	color: #333333;
	border: #C1C1C1 1rpx solid;
	border-radius: 35rpx;
	font-size: 28rpx;
}

/**pop css**/
.pop-bg{
	max-height: 80vh;
	overflow-y: auto;
}
.start-date{
	width: 50%;
	background-color: #F4F5F7;
	border-radius: 35rpx;
	height: 77rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999999;
}
.end-date{
	width: 50%;
	background-color: #F4F5F7;
	border-radius: 35rpx;
	height: 77rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #999999;
}
.btn-reset{
	border: 1px solid #3274F9;
	padding: 30rpx 70rpx;
	color: #3274F9;
	border-radius: 40rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-sure{
	background-color: #3274F9;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 40rpx;
	padding: 30rpx 70rpx;
	height: 80rpx;
}
.custom-checkbox .uni-data-checklist .checklist-group .checklist-box.is--tag  {
  border-radius: 20px; /* 设置圆角大小 */
  overflow: hidden; /* 防止内容溢出 */
  padding: 20rpx 35rpx;
  margin-top: 30rpx;
}
.custom-checkbox .uni-data-checklist .checklist-group .checklist-box.is--tag{
  margin-right: 15px;	
}
</style>
